<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 样式导入
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/modules/navigation/navigation.min.css'
import {mapState} from "vuex";

// 模块安装
import MySwiper, {Navigation} from 'swiper';

Swiper.use([Navigation]);

var mySwiper = new Swiper('.swiper')
$('#btn1').click(function(){
  alert(mySwiper.activeIndex);
})

export default {
  computed:{
    ...mapState(['index'])
  },
  mounted() {
    // 初始化过早
    new Swiper('.swiper', {
      freeMode: true,
      slidesPerView: 4,
      // 第一张和最后一张贴合边缘
      // centeredSlidesBounds: true,
      slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
      centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。
      spaceBetween: 16,
      speed: 500,
      initialSlide: this.index,
    });
  },
}
</script>
<style lang="scss" scoped>
.swiper {
  width: 375px;
  height: 130px;
  overflow: hidden;
}

.swiper-wrapper {
  transition-timing-function: ease;
}
</style>
